<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Embedded Apps | Raxan User Guide</title>
    <link href="../raxan/styles/master.css" rel="stylesheet" type="text/css" />
    <!--[if IE]><link rel="stylesheet" href="../raxan/styles/master.ie.css" type="text/css"><![endif]-->
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="highlight/styles/default.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="highlight/highlight.js"></script>
    <script type="text/javascript">
        hljs.initHighlightingOnLoad('javascript','html','php');
    </script>

</head>

<body>
    <div class="container c48 prepend-top">
        <h2 class="bottom">Raxan User Guide</h2>
        <div class="navbar">
            <div class="lf"><div class="rt"><div class="md">
                <ul>
                    <li><a href="../index.html" title="The Rich Ajax, CSS &amp; PHP Framework" >Home</a></li>
                    <li><a href="table-of-contents.html" title="Blog Posts" >Table Of Contents</a></li>
                </ul>
            </div></div></div>
        </div>
        <div class="prepend1 append1"><h2>Embedded Applications</h2>

<p>Beginning with 1.0 Beta 2 it's now possible to embedded an ajax application within any web page or application. This offers the following benefits:</p>

<ol>
<li>Developers can use Raxan to extend or enhance their existing web pages without having to make any major changes or convert or port the entire web page to into PHP. </li>
<li>Embedded Apps can be used with static or dynamically generated web pages such as those generated by other languages such as Perl, JSP, ASP, ASP.Net, Ruby, Python, etc. </li>
<li>Embedded apps can manipulate and traverse the client-side DOM elements within a web page. This means that an application can be designed to add or remove elements as users interact with the page.</li>
</ol>

<p>Creating an embedded application is the same as creating a typical Raxan PDI Ajax web page. The one thing to bear in mind is that the app will only communicate with the client's browser via Ajax after first load. Full page post-backs are not recommended for embedded applications.</p>

<p><strong>Emebedded Hello World app</strong><br />
This will add a button to the web page and will then display the 'Hello World' message when the button is clicked.</p>

<pre><code>&lt;?p

require_once("raxan/pdi/gateway.php");

class EmbeddedApp extends RichWebPage {
    function _init(){
        $this['body']-&gt;append('&lt;button id="button"&gt;Click Me!&lt;/button&gt;');

        // bind to click event using ajax callback
        $this['#button']-&gt;bind('#click','.button_click');

    }

    function button_click(){
        // use the CLX to sent and alert action script to the client
        C()-&gt;alert('Hello World!!! - PHP Rules!');
    }
}

RichWebPage::Init('EmbeddedApp');

?&gt;
</code></pre>

<p>To load the above app inside your web page you only need to add a single script tag with the <strong>?embed[js]</strong> query string as shown below:</p>

<pre><code>&lt;script type="text/javascript" src="hello.php?embed[js]"&gt;&lt;/script&gt;
</code></pre>

<p>Using the above you can pass special instructions to the app to prevent it from loading external CSS or JavaScript files:</p>

<pre><code>&lt;script type="text/javascript" src="hello.php?embed[js]=noxcss,noxjs"&gt;&lt;/script&gt;
</code></pre>

<p>The noxcss option will prevent the loading of all external css files, while noxjs will prevent the loading of all external JavaScript files. These options will come in handy if you have already loaded a specific script of css file.</p>

<h3>Sending Content To The Client</h3>

<p>The sendToClient() method provides a convenient way for developers to transfer DOMs elements from the server to the client. Let's say you wanted to create a div on the server and then add the div inside an element called "sidebar", here's how it could be done in a single line:</p>

<pre><code>&lt;?php
    $div = $this['&lt;div id="box1" class="box" /&gt;'];
    $div-&gt;sendToClient('#sidebar');
?&gt;
</code></pre>

<p>Other methods that you can use to send content to the client includes appendToClient(), prependToClient, replaceClient() or the standard jQuery methods that are available to the RichClientExtension (CLX).For example: C('#sidebar')->html('This is a message from PDI');</p>
</div>
        <div class="tpb pad" style="text-align:right">
            <a href="table-of-contents.html" class="quiet">Back to Table of Content</a>
        </div>
    </div>
</body>

</html>

